<template>
  <header style="background: #fff; box-shadow: 0 1px 4px rgba(0,21,41,.08); border-bottom: 1px solid #eee;">
    <div style="display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 56px;">
      <div style="display: flex; align-items: center; gap: 16px;">
        <h1 style="font-size: 24px; font-weight: bold; color: #1976d2; margin: 0; display: flex; align-items: center;">
          <span style="font-size: 28px; margin-right: 6px;">🐾</span>喵汪云管家
        </h1>
        <span style="font-size: 14px; color: #888;">宠物服务后台管理系统</span>
      </div>
      <div style="display: flex; align-items: center; gap: 16px;">
        <span style="font-size: 14px; color: #666;">{{data.user.name}}</span>
        <el-button type="danger" size="small" style="border-radius: 6px;" @click="logout">退出登录</el-button>
      </div>
    </div>
  </header>
  <div style="display: flex">
    <!--100vh代表了整个页面的高度，可以理解为100%,使用calc时，计算符号前后都要有空格-->
    <div style="width: 200px;border-right:1px solid #ddd;height: calc(100vh - 56px)">
      <el-menu router :default-active="router.currentRoute.value.path" style="border: 0">
        <el-menu-item index="/manager/home">
          <span style="font-size:18px;margin-right:8px">📊</span>仪表板
        </el-menu-item>
        <el-menu-item index="/manager/customer">
          <span style="font-size:18px;margin-right:8px">👥</span>客户管理
        </el-menu-item>
        <el-menu-item index="/manager/employee">
          <span style="font-size:18px;margin-right:8px">👨‍💼</span>员工管理
        </el-menu-item>
        <el-menu-item index="/manager/service">
          <span style="font-size:18px;margin-right:8px">🐕</span>宠物服务管理
        </el-menu-item>
        <el-menu-item index="/manager/inventory">
          <span style="font-size:18px;margin-right:8px">📦</span>商品管理
        </el-menu-item>
        <el-menu-item index="/manager/finance">
          <span style="font-size:18px;margin-right:8px">💰</span>财务管理
        </el-menu-item>
        <el-menu-item index="/manager/marketing">
          <span style="font-size:18px;margin-right:8px">🎯</span>营销管理
        </el-menu-item>
        <el-menu-item index="/manager/system">
          <span style="font-size:18px;margin-right:8px">⚙️</span>系统设置
        </el-menu-item>
        <el-menu-item index="/manager/dataAnalysis">
          <span style="font-size:18px;margin-right:8px">🔢</span>数据分析
        </el-menu-item>
      </el-menu>
    </div>
    <div style="flex: 1;width: 0;background-color: #f5f7ff;padding: 10px">
      <RouterView @updateName="update" />

    </div>

  </div>


</template>

<script setup>
import router from "@/router/index.js";
import { reactive } from "vue";

const data=reactive({
  user:JSON.parse(localStorage.getItem('xm-pro-user')),
  name:"用户名",
  logout:"登录/注册",
})

const logout = () => {
  localStorage.removeItem("xm-pro-user");  //清除当前登录用户的缓存数据
  location.href = "/login";
}
const update = () => {
  //重新在localStorage中读取子组件更新的信息
  data.user = JSON.parse(localStorage.getItem('xm-pro-user'));
}
</script>

<style>

</style>
